【Swift】ナビゲーションバーにタイトルとサブタイトルを表示する

#Swift

リルオッサ

2021.11.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ナビゲーションバーにタイトルとサブタイトルを記載したかったので調べました。

開発環境

Xcode 13
Swift 5.5

NavigaationBarにタイトルだけを表示する

navigationItem.title = "表示したいタイトル"

タイトルだけを表示したい場合はこれだけで大丈夫です。

しかし、navigationItemのプロパティにはsubTitleは存在していないのでUINavigationItemのプロパティtitleViewを活用してサブタイトルも追加します。

titleView

ナビゲーションバーのタイトルをカスタムできるVewで、このViewにタイトルとサブタイトルを持ったViewをセットしてあげます。

titleViewにタイトルとサブタイトルをセットする

今回はUINavigationItemのextensionとしてsetTitleView(withTitle title:, subTitile:)メソッドを作成しました。

extension UINavigationItem {

    func setTitleView(withTitle title: String, subTitile: String) {

        let titleLabel = UILabel()
        titleLabel.text = title
        titleLabel.font = .boldSystemFont(ofSize: 17)
        titleLabel.textColor = .black

        let subTitleLabel = UILabel()
        subTitleLabel.text = subTitile
        subTitleLabel.font = .systemFont(ofSize: 14)
        subTitleLabel.textColor = .gray

        let stackView = UIStackView(arrangedSubviews: [titleLabel, subTitleLabel])
        stackView.distribution = .equalCentering
        stackView.alignment = .center
        stackView.axis = .vertical

        self.titleView = stackView
    }
}

タイトル用のUILabelとサブタイトル用のUILabelを作成
作成したUILabelをUIStackViewに追加
UIStackViewに任意の設定を行う
navigationItem.titleViewに作成したタイトルとサブタイトルを含んだUIStackViewを代入

後は、このメソッドを呼び出して使うだけです。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.setTitleView(withTitle: "仁義なき戦い", subTitile: "広島死闘篇")
    }
}

これで表示されました。